'use client'; // 错误边界必须是客户端组件

import { useEffect } from 'react';
import { Button } from '@/components/ui/button';

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    // 将错误记录到错误报告服务
    console.error('应用错误:', error);
  }, [error]);

  return (
    <div className="flex flex-col items-center justify-center min-h-[50vh] p-6">
      <div className="max-w-md w-full bg-white shadow-lg rounded-lg p-8 text-center">
        <h2 className="text-2xl font-bold text-red-600 mb-4">出现了一些问题</h2>
        <p className="text-gray-600 mb-6">
          应用程序在渲染过程中遇到了错误。我们已经记录了这个问题，并将尽快修复。
        </p>
        {error.message && (
          <div className="bg-red-50 p-4 rounded-md mb-6">
            <p className="text-sm text-red-800">{error.message}</p>
          </div>
        )}
        <Button
          onClick={() => reset()}
          className="bg-blue-600 hover:bg-blue-700 text-white"
        >
          重试
        </Button>
      </div>
    </div>
  );
} 